<script setup>
const messageList = [
  {
    id: 1,
    icon: '/images/avatar1.jpg',
    title: '旗舰店',
    value: '刚刚',
    label: '描述信息',
  },
  {
    id: 2,
    icon: '/images/avatar2.jpg',
    title: '旗舰店',
    value: '刚刚',
    label: '描述信息',
  },
  {
    id: 3,
    icon: '/images/avatar3.png',
    title: '旗舰店',
    value: '刚刚',
    label: '描述信息',
  },
  {
    id: 4,
    icon: '/images/avatar4.png',
    title: '旗舰店',
    value: '刚刚',
    label: '描述信息',
  },
]
</script>

<template>
  <van-cell-group>
    <van-cell
      v-for="item in messageList"
      :key="item.id"
      :title="item.title"
      :value="item.value"
      :label="item.label"
      center
    >
      <template #icon>
        <van-image :src="item.icon" width="40" height="40" round />
      </template>
    </van-cell>
  </van-cell-group>
</template>

<style lang="scss" scoped>
:deep(.van-cell) {
  .van-cell__left-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    overflow: hidden;

    .van-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
